import React from 'react';
import {
  StyleSheet,
  View,
  TouchableWithoutFeedback,
} from 'react-native';
import { scaleSize } from '../../utils/screen';
import FontText from './FontText';
import SeatBox from './SeatBox';

const SEAT_SIZE = scaleSize(100);

class TableWithSeats extends React.Component {
  constructor(props) {
    super(props);

    const { seats, defaultValue } = this.props;
    const { row, column } = this._getSeatGridSize(seats);

    this.state = {
      selected: !!defaultValue,
    };
  }

  componentWillReceiveProps(nextProps) {
    if (this.props.defaultValue !== nextProps.defaultValue) {
      this.setState({
        selected: !!nextProps.defaultValue,
      });
    }
  }

  _getSeatGridSize(seats) {
    let row = 0, column = 0;

    if (!seats || seats.length === 0) {
      return {row, column};
    }

    seats.forEach(seat => {
      if (parseInt(seat.x) > row) {
        row = parseInt(seat.x);
      }

      if (parseInt(seat.y) > column) {
        column = parseInt(seat.y);
      }
    });

    ++row;
    ++column;
    return {row, column};
  }

  _rebuildSelectedSeats(row, column, seats) {
    if (seats && seats.length > 0) {
      let rebuiltSeats = new Array(row * column).fill(false);
      seats.forEach(seat => {
        const seatIndex = parseInt(seat.x) * column + parseInt(seat.y);
        rebuiltSeats[seatIndex] = true;
      });

      return rebuiltSeats;
    }

    return [];
  }

  renderSeatBoxes(seats) {
    let seatCount = 0;
    const { selected } = this.state;

    return seats.map((value, index) => {
      value && (++seatCount);

      return (
        <SeatBox
          label={value ? seatCount : ''}
          size={SEAT_SIZE}
          editable={false}
          style={
            value ? (
              selected ?
              {
                borderColor: '#fd265d',
                backgroundColor: 'rgba(253, 38, 93, 0.3)',
              } :
              {}
            ) :
            {
              backgroundColor: 'transparent',
              borderColor: 'transparent',
            }
          }
          key={index}
        />
      );
    });
  }

  _changeSelection() {
    const newSelected = !this.state.selected;
    this.setState({
      selected: newSelected,
    });

    const { onSelectionChange } = this.props;
    onSelectionChange && onSelectionChange(newSelected);
  }

  render() {
    const { table, seats } = this.props;
    const { selected } = this.state;
    const { row, column } = this._getSeatGridSize(seats);
    const rebuiltSeats = this._rebuildSelectedSeats(row, column, seats)
    let seatsGridWidth = column * SEAT_SIZE;

    if (seatsGridWidth < scaleSize(100)) {
      seatsGridWidth = scaleSize(100);
    }

    return (
      <TouchableWithoutFeedback
        onPress={() => this._changeSelection()}
      >
        <View style={styles.container}>
          <View style={styles.tableName}>
            <FontText
              style={ !selected ? styles.tableNameText : [styles.tableNameText, {color: '#fff'}] }
              font={'book'}
            >
              { table.name }
            </FontText>
          </View>
          <View style={[styles.gridWrapper, {width: seatsGridWidth}]}>
            {this.renderSeatBoxes(rebuiltSeats)}
          </View>
        </View>
      </TouchableWithoutFeedback>
    );
  }
};

/* StyleSheet =============================================================== */

const styles = StyleSheet.create({
  container: {
    minWidth: scaleSize(100),
    minHeight: scaleSize(100),
    alignItems: 'center',
    margin: scaleSize(20),
  },
  tableName: {
    padding: scaleSize(10),
  },
  tableNameText: {
    color: '#9b9b9b',
    fontSize: scaleSize(30),
  },
  gridWrapper: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'center',
  }
});

export default TableWithSeats;
